<template>
	<div class="customer_main">
		<div class="mesg_tit">客户中心</div>
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formCustomerSearch" class="customerFormMain ">
		        <el-form-item label="关键字">
		          <el-input v-model="formCustomerSearch.mesg"  style="width:300px;" placeholder="请输入姓名/电话号码"></el-input>
		        </el-form-item>
		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
		          
		        </el-form-item>
		    </el-form>
	      <el-table
	        :data="customerTable"
	        stripe
	        border
	        style="width: 100%"
					v-loading="loading">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="name"
	          label="客户姓名"
	          width="100"
	        >
	        </el-table-column>
	        
	         <el-table-column
	          prop="phone"
	          label="客户电话"
	          width="120">
	        </el-table-column>
	       <el-table-column
	          prop="idcardReal"
	          label="身份证号"
	          width="180"
	          >
	        </el-table-column>

	        <el-table-column
	          prop="houseCount"
	          label="房屋数量">
	        </el-table-column>
	        <el-table-column
	          fixed='right'
	          width="120"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
	              <el-button
	                size="mini"
	                type="success"
	                @click="handlePhone(scope.$index, scope.row)">电话</el-button>
	             <el-button
	                size="mini"
	                @click="handleLook(scope.$index, scope.row)">查看</el-button>
	            </template>
	        </el-table-column>
	      </el-table>

	      
	      <div class="block">
	        <el-pagination
	          @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageCustomer"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeCustomer"
		        layout="sizes, prev, pager, next"
		        :total="totalCustomer">
	        </el-pagination>
	      </div>
	  </div>
	

	</div>
</template>
<script>
import bus from '@/api/bus'
import { 
	getCustomerByQuery,
	pxbPhoneCallback } from '@/api'
  export default {
    data() {
      return {
       	formCustomerSearch: {//查询条件
          mesg: ''
        },
        customerTable:[],
        totalCustomer: null,// 分页总条数
        pageSizeCustomer:10, //当前分页一页多少条数
        currentPageCustomer:1,//当前页数
		    loading: true
      };
		},
		created () {
			let params = {
					query: this.formCustomerSearch.mesg,
					page: this.currentPageCustomer,
					size: this.pageSizeCustomer
				}
			this.CustomerByQuery(params)
		},
    methods:{
    	phoneCallback (params) { //调入呼出电话接口(立即回拨)
		  	pxbPhoneCallback (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						this.$router.push({
							path: '/home/oncall',
							query: {
								callPhone: params.called
							}
						})
						bus.$emit('hideEvent', true)
					}else if(code == 1){
						this.$message({
							message: '分机号错误!'
						})
					}else if(code == 2){
						this.$message({
							message: '被叫号错误!'
						})
					}
					else if(code == 3){
						this.$message({
							message: '呼叫失败!'
						})
					}
				});
			},
    	handlePhone(index, row) {//拨打电话
	      let params = {
		  		device: sessionStorage.getItem('device'),
		  		called: row.phone
		  	}
		  	//console.log(row.phone)
		  	this.phoneCallback (params)
	    },
			handleLook(index, row) {//查看
				this.$router.push({
					path: '/home/customerdetails',
					query: {
						id: row.id
					}
				})
			},
			onSubmit(){
				if (this.loading) {
          return
        }
        this.loading = true
				let params = {
					query: this.formCustomerSearch.mesg,
					page: this.currentPageCustomer,
					size: this.pageSizeCustomer
				}
				this.CustomerByQuery(params)
			},
			CustomerByQuery (params) {
				getCustomerByQuery (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data
						this.totalCustomer= data.pageInfo.total
						this.customerTable = data.list
						this.loading = false
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleSizeChange (val) { //改变每页的条数
				this.pageSizeCustomer = val;
				this.currentPageCustomer = 1
				let params = {
					query: this.formCustomerSearch.mesg,
					page: this.currentPageCustomer,
					size: this.pageSizeCustomer
				}
				this.CustomerByQuery(params);//调用查询接口
			},
			handleCurrentChange (val) { //改变当前页
			  this.currentPageCustomer = val
				let params = {
					query: this.formCustomerSearch.mesg,
					page: this.currentPageCustomer,
					size: this.pageSizeCustomer
				}
				this.CustomerByQuery(params);//调用查询接口
			},
    }
  };
</script>
<style scoped>
  
</style>